<template>
  <div class="home">
    <!-- 主横幅区域 -->
    <div class="hero-section">
      <div class="hero-background">
        <!-- 动态渐变球体 -->
        <div class="gradient-sphere"></div>
        <div class="gradient-sphere-2"></div>
        
        <!-- 动态网格背景 -->
        <div class="grid-background">
          <div class="grid-line horizontal" v-for="n in 10" :key="'h'+n"></div>
          <div class="grid-line vertical" v-for="n in 10" :key="'v'+n"></div>
        </div>
        
        <!-- 动态光效 -->
        <div class="light-effects">
          <div class="light-beam"></div>
          <div class="light-beam"></div>
          <div class="light-beam"></div>
        </div>

        <!-- 飘动的粒子 -->
        <div class="particles">
          <div class="particle" v-for="n in 20" :key="n"></div>
        </div>
      </div>

      <div class="hero-content">
        <h1 class="animate__animated animate__fadeInDown">
          <span class="gradient-text">郑州西亚斯国旗护卫队</span>
        </h1>
        <p class="animate__animated animate__fadeInUp animate__delay-1s">
          传承红色基因，弘扬爱国精神，培养时代新人
        </p>
        <div class="hero-buttons animate__animated animate__fadeInUp animate__delay-2s">
          <el-button class="gradient-btn-large hover-effect" @click="$router.push('/join')">
            加入我们
            <i class="el-icon-right button-icon"></i>
          </el-button>
          <el-button class="outline-btn hover-effect" @click="$router.push('/about')">
            了解更多
            <i class="el-icon-arrow-right button-icon"></i>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 核心价值 -->
    <div class="features-section">
      <div class="section-container">
        <h2 class="section-title">
          <span class="gradient-text">国护精神</span>
        </h2>
        <div class="features-grid">
          <div class="feature-card" v-for="feature in features" :key="feature.id">
            <div class="feature-icon" :class="feature.iconClass">
              <i :class="feature.icon"></i>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 风采展示 -->
    <div class="showcase-section">
      <div class="section-container">
        <h2 class="section-title gradient-text">风采展示</h2>
        <el-row :gutter="30">
          <el-col :sm="24" :md="8" v-for="item in showcases" :key="item.id">
            <div class="showcase-card glass-effect">
              <div class="showcase-image">
                <img :src="item.image" :alt="item.title">
              </div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 数据统计 -->
    <div class="stats-section">
      <div class="section-container">
        <div class="stats-grid">
          <div class="stat-card" v-for="stat in statistics" :key="stat.id">
            <div class="stat-number gradient-text">{{ stat.number }}+</div>
            <div class="stat-title">{{ stat.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      features: [
        {
          id: 1,
          icon: 'el-icon-medal',
          iconClass: 'purple-gradient',
          title: '忠诚担当',
          description: '对党忠诚，听党指挥，为国旗护卫事业无私奉献'
        },
        {
          id: 2,
          icon: 'el-icon-trophy',
          iconClass: 'blue-gradient',
          title: '严谨规范',
          description: '一丝不苟，精益求精，追求完美的护卫标准'
        },
        {
          id: 3,
          icon: 'el-icon-star-on',
          iconClass: 'teal-gradient',
          title: '团结协作',
          description: '步调一致，同心同德，共同完成护卫使命'
        }
      ],
      showcases: [
        {
          id: 1,
          image: 'https://img.zcool.cn/community/01639e5d8b1927a8012060be0f0ddb.jpg',
          title: '升旗仪式',
          description: '每周一次的庄严升旗仪式，展现国护风采'
        },
        {
          id: 2,
          image: 'https://img.zcool.cn/community/01e0bc5d8b1927a8012060be78795f.jpg',
          title: '队列训练',
          description: '日常训练中精进技能，打造过硬本领'
        },
        {
          id: 3,
          image: 'https://img.zcool.cn/community/01639e5d8b1927a8012060be0f0ddb.jpg',
          title: '重大活动',
          description: '参与学校重大活动，展示国护风采'
        }
      ],
      statistics: [
        { id: 1, number: '20', title: '年度优秀传统' },
        { id: 2, number: '100', title: '优秀队员' },
        { id: 3, number: '1000', title: '升旗次数' },
        { id: 4, number: '50', title: '重大活动保障' }
      ]
    }
  }
}
</script>

<style scoped>
.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.hero-background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gradient-sphere {
  position: absolute;
  width: 600px;
  height: 600px;
  right: -200px;
  top: -200px;
  background: linear-gradient(45deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border-radius: 50%;
  filter: blur(40px);
  animation: pulseAndFloat 10s ease-in-out infinite;
}

.gradient-sphere-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  left: -100px;
  bottom: -100px;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(45, 212, 191, 0.15));
  border-radius: 50%;
  filter: blur(40px);
  animation: pulseAndFloat 8s ease-in-out infinite reverse;
}

.hero-content {
  text-align: center;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 4em;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 2em;
  color: var(--text-primary);
  margin-top: 10px;
}

.hero-content p {
  font-size: 1.2em;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.gradient-btn-large {
  background: var(--primary-gradient);
  color: white;
  border: none;
  padding: 15px 40px;
  font-size: 1.1em;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.gradient-btn-large:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.outline-btn {
  background: transparent;
  border: 2px solid #6366f1;
  color: #6366f1;
  padding: 15px 40px;
  font-size: 1.1em;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.outline-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

/* 核心价值 */
.features-section {
  padding: 100px 0;
  background: white;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  padding: 40px;
  text-align: center;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.feature-icon i {
  font-size: 40px;
  color: white;
}

.purple-gradient {
  background: var(--primary-gradient);
}

.blue-gradient {
  background: linear-gradient(45deg, #3b82f6, #60a5fa);
}

.teal-gradient {
  background: linear-gradient(45deg, #0d9488, #2dd4bf);
}

/* 风采展示 */
.showcase-section {
  padding: 100px 0;
  background: var(--background-off);
}

.showcase-card {
  padding: 20px;
  text-align: center;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
  height: 100%;
}

.showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.showcase-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 16/9;
}

.showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.showcase-card:hover .showcase-image img {
  transform: scale(1.05);
}

.showcase-card h3 {
  margin: 15px 0;
  color: var(--text-primary);
}

.showcase-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 数据统计 */
.stats-section {
  padding: 80px 0;
  background: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.stat-card {
  text-align: center;
  padding: 30px;
}

.stat-number {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-title {
  color: var(--text-secondary);
  font-size: 1.1em;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 3em;
  }
  
  .subtitle {
    font-size: 1.5em;
  }
  
  .hero-buttons {
    flex-direction: column;
  }
  
  .gradient-btn-large,
  .outline-btn {
    width: 100%;
  }
}

/* 网格背景 */
.grid-background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.grid-line {
  position: absolute;
  background: linear-gradient(90deg, 
    transparent,
    rgba(99, 102, 241, 0.05),
    transparent
  );
}

.grid-line.horizontal {
  width: 100%;
  height: 1px;
  animation: moveHorizontal 15s linear infinite;
}

.grid-line.vertical {
  width: 1px;
  height: 100%;
  animation: moveVertical 15s linear infinite;
}

/* 动态光效 */
.light-effects {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.light-beam {
  position: absolute;
  width: 150%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(99, 102, 241, 0.1),
    rgba(139, 92, 246, 0.1),
    transparent
  );
  transform-origin: left;
  animation: rotateLightBeam 8s linear infinite;
}

.light-beam:nth-child(1) { animation-delay: 0s; }
.light-beam:nth-child(2) { animation-delay: -2.6s; }
.light-beam:nth-child(3) { animation-delay: -5.3s; }

/* 粒子效果 */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(99, 102, 241, 0.2);
  border-radius: 50%;
  animation: floatParticle 10s linear infinite;
}

/* 为每个粒子设置不同的初始位置和动画延迟 */
.particle:nth-child(3n) {
  width: 6px;
  height: 6px;
  animation-duration: 12s;
}

.particle:nth-child(3n+1) {
  width: 3px;
  height: 3px;
  animation-duration: 8s;
}

/* 动画关键帧 */
@keyframes moveHorizontal {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes moveVertical {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

@keyframes rotateLightBeam {
  from { transform: rotate(0deg) translateX(-50%); }
  to { transform: rotate(360deg) translateX(-50%); }
}

@keyframes floatParticle {
  0% {
    transform: translate(random(100) + 'vw', -10px);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translate(random(100) + 'vw', 110vh);
    opacity: 0;
  }
}

/* 渐变球体动画优化 */
@keyframes pulseAndFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -20px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid-background,
  .light-effects,
  .particles {
    display: none;
  }
}

/* 按钮悬浮效果 */
.hover-effect {
  position: relative;
  overflow: hidden;
}

.hover-effect::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}

.hover-effect:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.button-icon {
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.hover-effect:hover .button-icon {
  transform: translateX(5px);
}
</style>